import React, { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { View, StyleSheet, Alert, TouchableOpacity, ScrollView, Vibration, Text } from 'react-native';
import { Icon, List, ListItem, Button, SearchBar } from 'react-native-elements';
import { primaryColor, executor, toast } from './utils';
import { AssignFactoryQuery } from './graphql';
import Loader from './widgets/Loader';
import RefreshScrollView from './widgets/RefreshScrollView';

const styles = StyleSheet.create({
  button: {
    marginTop: 16
  },
  icon: {
    marginRight: 16,
    color: primaryColor,
    fontSize: 16
  }
});

class FactoryFactoryPage extends Component {
  static navigationOptions = ({navigation, screenProps}) => {
    return {
      title: 'Assign To Factory'
    };
  }
  onAssign = (factory) => {
    const { orderNumbers } = this.props.navigation.state.params;
    if (!orderNumbers||orderNumbers.length===0) return toast(`Please select order to assign`);

    Alert.alert(
      `Assign ${orderNumbers.length} bags to ${factory.name}?`,
      orderNumbers.join(', '),
      [
        {text: 'Cancel'},
        {text: 'Assign', onPress: () => {
          executor(this.props.assignLaundryOrders, factory)
            .then(({res}) => {
              if (res) {
                toast(`Assign to ${factory.name} succeed`);
                this.props.navigation.goBack();
                this.props.navigation.state.params.onFinished();
              }
            });
          toast('Assigning...');
        }},
      ],
      { cancelable: true }
    );
  }
  render() {
    if (this.props.loading) {
      return <Loader/>;
    } else {
      return (
        <RefreshScrollView refetch={this.props.refetch}>
          <List>
            {this.props.factories&&this.props.factories.map((factory, index) =>
              <ListItem key={index} title={factory.name} onPress={()=>this.onAssign(factory)}/>)}
          </List>
        </RefreshScrollView>
      );
    }
  }
}

export default compose(
  graphql(gql`
    query FactoryFactoryPage {
      factories(limit:100) {
        id
        name
      }
    }
  `, {
    props: ({data:{factories, refetch, loading}}) => {
      return {
        refetch,
        factories,
        loading
      };
    }
  }),
  graphql(gql`
    mutation assignLaundryOrders($orderNumbers:[Int]!,$factoryId:String!) {
      assignLaundryOrders(orderNumbers:$orderNumbers,factoryId:$factoryId)
    }
  `, {
    name: 'assignLaundryOrders',
    props: ({ownProps:{navigation:{state:{params:{orderNumbers, date}}}}, assignLaundryOrders}) => {
      return {
        assignLaundryOrders: (factory) => assignLaundryOrders({
          variables: {
            orderNumbers: orderNumbers,
            factoryId: factory.id
          },
          refetchQueries: [{
            query: AssignFactoryQuery,
            variables: { 
              date: date
            },
          }]
        })
      };
    }
  })
)(FactoryFactoryPage);